<template>
  <div class="scheduleSystemMenuDiv">
    <el-row
      type="flex"
      justify="space-between"
      align="center"
      :gutter="20"
      style="width: 100%; margin-bottom: 10px"
    >
      <el-col
        :span="8"
        style="display: flex"
        ><span style="width: 100px; height: 40px; line-height: 40px"
          >班次：</span
        >
        <el-select
          style="width: 100%"
          v-model="shiftFrequency"
          placeholder="选择班次"
        >
          <el-option
            label="白班"
            :value="0"
          >
          </el-option>
          <el-option
            label="夜班"
            :value="1"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :span="8"
        style="display: flex"
        ><span style="width: 100px; height: 40px; line-height: 40px"
          >机车：</span
        >
        <el-select
          style="width: 100%"
          v-model="locoMot"
          placeholder="请选择"
        >
          <el-option
            v-for="item in locoMotoptions"
            :key="item.id"
            :label="item.deviceName"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
      <el-col
        :span="8"
        style="display: flex"
        ><span style="width: 100px; height: 40px; line-height: 40px"
          >日期：</span
        >
        <el-date-picker
          v-model="date"
          style="width: 100%"
          type="month"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-col>
      <el-col
        :span="4"
        style="display: flex"
        ><el-button
          type="primary"
          @click="searchHandler"
          >查询</el-button
        ><el-button
          plain
          @click="resetHandler"
          >重置</el-button
        ></el-col
      >
    </el-row>
    <el-row>
      <el-table
        :data="renderData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#606266', color: '#fff' }"
        height="700"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          label="值班日期"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.dutyDate }} &nbsp;&nbsp;[
              {{ scope.row.classes === 0 ? '白班' : '晚班' }} ]
            </span>
          </template></el-table-column
        >
        <el-table-column
          prop="locomotiveName"
          label="机车"
          align="center"
        />
        <el-table-column
          prop="commander"
          label="车长"
          align="center"
        />
        <el-table-column
          prop="driver"
          label="司机"
          align="center"
        />
        <el-table-column
          prop="passenger"
          label="添乘"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.passenger === null ? '无添乘' : scope.row.passenger
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editHandler(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog
      :title="editTitle"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="editForm"
        label-width="80px"
      >
        <el-form-item label="值班日期">
          <el-select
            disabled
            style="width: 100%; text-align: center; direction: rtl"
            v-model="editForm.classes"
            placeholder="请选择班次"
          >
            <el-date-picker
              slot="prefix"
              style="width: 100%; margin-left: -5px"
              v-model="editForm.dutyDate"
              type="date"
              placeholder="选择日期"
              @click.native.stopdisabled
            >
            </el-date-picker>
            <el-option
              label="白班"
              :value="0"
            >
            </el-option>
            <el-option
              label="晚班"
              :value="1"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机车">
          <el-select
            style="width: 100%"
            v-model="editForm.locomotiveId"
            placeholder="请选择机车"
            disabled
          >
            <el-option
              v-for="item in locoMotoptions"
              :key="item.id"
              :label="item.deviceName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车长">
          <el-select
            style="width: 100%"
            v-model="editForm.commanderId"
            placeholder="请选择机车"
          >
            <el-option
              v-for="item in userOptions1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="司机">
          <el-select
            style="width: 100%"
            v-model="editForm.driverId"
            placeholder="请选择机车"
          >
            <el-option
              v-for="item in userOptions2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添乘">
          <el-select
            style="width: 100%"
            v-model="editForm.passengerId"
            placeholder="请选择机车"
          >
            <el-option
              v-for="item in userOptions3"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editSaveHandler"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDutyList,
  updateDuty,
} from '/src/http/productSchedule/personnelDutyMg.js'
import { getLocomotiveList } from '/src/http/productSchedule/locoMotMachineryMg.js'
import { autoClick } from '/src/utils/autoClick.js'
import { getUserList } from '/src/http/commonApi.js'
export default {
  data() {
    return {
      dialogVisible: false,
      shiftFrequency: 0,
      locoMot: null,
      date: null,
      locoMotoptions: [],
      userOptions1: [],
      userOptions2: [],
      userOptions3: [],
      hiddenDangerCategory: '',
      total: 0,
      pageSize: 50,
      currentPage: 1,
      isSearch: false,
      renderData: [],
      companyInput: null,

      editTitle: '',
      editDialogStatus: false,
      editForm: {
        dutyDate: '',
        classes: null,
        locomotiveId: null,
        commander: null,
        commanderId: '',
        driver: null,
        driverId: null,
        passenger: null,
        passengerId: null,
      },
    }
  },

  mounted() {
    this.getLocomotiveListApi()
    let currentTime = new Date()
    let year = currentTime.getFullYear()
    let month = currentTime.getMonth() + 1
    let formattedDate = `${year}-${month.toString().padStart(2, '0')}-01`
    this.date = formattedDate
    setTimeout(() => {
      console.log(123)
      this.getDutyListApi()
    }, 2000)
  },

  methods: {
    searchHandler() {
      this.getDutyListApi()
    },

    resetHandler() {
      this.getDutyListApi()
      this.shiftFrequency = ''
      this.locoMot = ''
      this.date = ''
      this.isSearch = false
    },

    addHandler() {
      this.editTitle = '新增'
      this.editDialogStatus = true
    },

    editHandler(v) {
      this.editTitle = '编辑'

      this.editForm = JSON.parse(JSON.stringify(v))
      this.editDialogStatus = true
      console.log('edit::: ', this.editForm)
    },

    handleSizeChange(v) {
      this.pageSize = v
      if (this.isSearch === true) {
        this.getDutyListApi(
          this.currentPage,
          v,
          this.shiftFrequency,
          this.locoMot,
          this.date
        )
      } else {
        this.getDutyListApi(this.currentPage, v)
      }
    },

    handleCurrentChange(v) {
      this.currentPage = v
      if (this.isSearch === true) {
        this.getDutyListApi(
          v,
          this.pageSize,
          this.shiftFrequency,
          this.locoMot,
          this.date
        )
      } else {
        this.getDutyListApi(v, this.pageSize)
      }
    },

    editSaveHandler() {
      this.editDialogStatus = false
      let params = {
        dutyDate: this.editForm.dutyDate,
        classes: this.editForm.classes,
        locomotiveId: this.editForm.locomotiveId,
        commanderId: this.editForm.commanderId,
        driverId: this.editForm.driverId,
        passengerId: this.editForm.passengerId,
        id: this.editForm.id,
      }
      this.updateDutyApi(params)
      autoClick()
    },
    /**
     * 接口
     */

    getLocomotiveListApi() {
      getLocomotiveList().then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
          this.locoMotoptions = res.data
          if (res.data) {
            this.locoMot = res.data[0].id
            console.log(this.locoMot)
          }
        }
      })
      getUserList('ROLE_JCSJ').then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
          this.userOptions1 = res.data
        }
      })
      getUserList('ROLE_JCCZ').then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
          this.userOptions2 = res.data
        }
      })
      getUserList('ROLE_JCTC').then((res) => {
        if (res.code == 200) {
          console.log('res::: ', res)
          this.userOptions3 = res.data
        }
      })
    },

    getDutyListApi() {
      let params = {
        dutyDate: this.date,
        locomotiveId: this.locoMot,
        classes: this.shiftFrequency,
        pageNum: 1,
        pageSize: 50,
      }
      console.log('params::: ', params)
      getDutyList(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
        }
      })
    },

    updateDutyApi(params) {
      updateDuty(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
          this.getDutyListApi()
          autoClick()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 10px;
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pDiv {
  background-color: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-right: 0px;
  border-radius: 4px 0 0 4px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  width: 13.7%;
}
:deep(.pSelect) {
  .el-input__inner {
    border-radius: 0 4px 4px 0;
    width: 107.5%;
  }
  .el-input__suffix {
    right: -5%;
  }
}
.mgb-10 {
  margin-bottom: 10px;
}
:deep(.el-select .el-input__inner::placeholder) {
  text-align: center;
}
</style>
